<template>
  <div>
    <div class="head">
      <a class="back" @click="doGoback">
        <img src="../../../../assets/1first/5-8搜索结果/back.png" alt="">
      </a>
      <div>修炼秘籍</div>
      <div class="share">
        <img src="../../../../assets/1first/修炼秘籍/share.png" alt="" @click="doShow">
      </div>
    </div>
    <ul>
      <li class="contLi" v-for="item in 4">
        <img src="../../../../assets/1first/修炼秘籍/zhuanbian.png" alt="" class="img1">
        <h4 class="title">ADDICTION</h4>
        <p class="desc">质感奢华 宛如定制</p>
      </li>
    </ul>
    <wang-share v-if="isShow" ref="child" @cus-event="addShow($event)"></wang-share>
  </div>
</template>
<script>
  import WangShare from '../../../WangHeader/WangShare/WangShare'
  export default {
    data() {
      return {
        isShow: false
      }
    },
    methods: {
      doGoback() {
        this.$router.go(-1)
      },
      addShow(e) {
        this.isShow = e
      },
      doShow() {
        this.isShow = true
      }
    },
    components: {
      WangShare
    }
  }
</script>
<style scoped>
  .head{
    position: relative;
    text-align: center;
    background: #e53e42;
    color: #fff;
    line-height: 2.13rem;
    font-size: 0.8rem;
  }
  .back{
    position: absolute;
    left: 0;
    margin-left: 0.44rem;
  }
  .back img{
    width: 0.51rem;
  }
  .share{
    position: absolute;
    right: 0;
    margin-right: 0.44rem;
    top: 0;
  }
  .share img{
    width: 0.8rem;
  }
  .contLi{
    padding-bottom: 0.44rem;
    border-bottom: 1px solid #ccc;
    margin-bottom: 0.22rem;
  }
  .img1{
    width: 100%;
  }
  .title{
    font-family: SimHei;
    font-size: 0.67rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.67rem;
    color: #333333;
    padding: 0.44rem;
  }
  .desc{
    font-family: SimHei;
    font-size: 0.53rem;
    font-weight: normal;
    font-stretch: normal;
    color: #4d4d4d;
    padding-left: 0.44rem;
  }
</style>
